<script setup lang="tsx">
defineOptions({
  name: "batchCreateMessageBox"
});

import { ref, reactive } from "vue";
import commonTable from "@/views/common/components/commonTable/index.vue";

const dialogTableVisible = defineModel({ type: Boolean, default: false });

const props = withDefaults(defineProps<{ data: Array<any> }>(), { data: () => [] });

const batchCreateMessageBoxRef = ref<HTMLElement | null>(null);
const commonTableRef = ref<CommonTable.TableRefType>(null);

const emits = defineEmits(["close"]);

const tableCloumns: Array<CommonTable.TableCloumnsType> = [
  {
    label: "开单是否成功",
    prop: "res",
    width: 100,
    render({ row }) {
      return () => (row.res ? "是" : <span style={{ color: "red" }}>否</span>);
    }
  },
  {
    label: "工单内容",
    prop: "reminderContent",
    width: 300
  },
  {
    label: "报错信息",
    prop: "message",
    width: 300
  }
];

const closeHandler = () => {
  emits("close");
};
</script>

<template>
  <px-dialog v-model="dialogTableVisible" title="批量开单报错信息" width="1200px" @close="closeHandler">
    <div ref="batchCreateMessageBoxRef" class="batch-create-message-box-content">
      <commonTable ref="commonTableRef" indexNeed :height="500" :pagination="false" :image-size="60" :tableCloumns="tableCloumns" :list="data" />
    </div>
  </px-dialog>
</template>
